<template>
  <div class="section" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>
    
    <div class="section-header">热门岗位TOP10</div>
    <div :style="chartsDom" v-if="jz">

      <swiper :options="swiperOption" ref="mySwiper" v-if="listData.length" :style="chartsDom">
        <!-- slides -->
        <swiper-slide v-for="(item, index) in listData" :key="index">
          <rank-list-item :index="index" :color="`#fdbc21`" :name="item.PositionName" :value="item.Wage" v-if="index === 0" class="rank-component"></rank-list-item>
          <rank-list-item :index="index" :color="`#fb7218`" :name="item.PositionName" :value="item.Wage" v-if="index === 1" class="rank-component"></rank-list-item>
          <rank-list-item :index="index" :color="`#2bda6c`" :name="item.PositionName" :value="item.Wage" v-if="index === 2" class="rank-component"></rank-list-item>
          <rank-list-item :index="index" :color="`#37a2da`" :name="item.PositionName" :value="item.Wage" v-if="index > 2" class="rank-component"></rank-list-item>
        </swiper-slide>
      </swiper>
      
    </div>
    <animae-jz  :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import { get_JobTable_SalaryTop10 } from '@/api/data'
export default {
  data() {
    return {
      chartsDom: {},
      listData: [],
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        overflow: 'hidden',
        padding: '15px 0',
        'box-sizing': 'border-box',
        // 'background-color': 'red'
      }
      }
    },
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.$nextTick(_=>{
      this.init();
    })
    // console.log('this is current swiper instance object', this.swiper)
    // this.swiper.slideTo(3, 1000, false)
  },
  methods: {
    init(){
      this.jz=false
      get_JobTable_SalaryTop10(this.dateProp)
      .then(({data:{data}})=>{
        this.jz=true
        this.listData = data
      });
    }
  },
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100% 
</style>